<template>
  <el-form-item label="手机号码">
    <el-select v-model="form.phone_id" class="w-full" filterable clearable placeholder="请选择">
      <el-option v-for="d in form.phone" :key="d.value" :label="d.phone_num" :disabled="d.used" :value="d.phone_id">
        {{ d.phone_num }}
      </el-option>
    </el-select>
    <VText v-if="form.phone_used" :value="form.phone_used" :style="{'--v-text--content-color': '#dc2626'}" />
  </el-form-item>
  <el-form-item v-if="!amazon" label="注册邮箱">
    <el-input v-model="form.email" placeholder="请输入" class="w-full" />
  </el-form-item>
  <el-form-item label="注册邮箱密码">
    <VGroup class="w-full">
      <el-input v-if="form.shop_id && validates.email_password === false" value="*****" disabled class="w-full" />
      <el-input v-else v-model="form.email_password" :placeholder="!form.shop_id ? '请输入' : ''" autocomplete="new-password" show-password class="w-full" />
      <el-button type="primary" v-if="form.shop_id" :disabled="validates.email_password !== false" @click="view('email_password')">查看</el-button>
    </VGroup>
  </el-form-item>
  <el-form-item label="账号密码">
    <VGroup class="w-full">
      <el-input v-if="form.shop_id && validates.account_password === false" value="*****" disabled class="w-full" />
      <el-input v-else v-model="form.account_password" :placeholder="!form.shop_id ? '请输入' : ''" autocomplete="new-password" show-password class="w-full" />
      <el-button v-if="form.shop_id" type="primary" :disabled="validates.account_password !== false" @click="view('account_password')">查看</el-button>
    </VGroup>
  </el-form-item>
  <el-form-item v-if="amazon" label="两步验证图片" prop="verify_image">
    <ImageUpload v-model="form.verify_image" :limit="1" :disabled="form.shop_id && validates.verify_image === false" :isShowTip="false">
      <div v-if="form.shop_id && validates.verify_image === false">输入密码查看</div>
    </ImageUpload>
    <el-button v-if="form.shop_id" type="primary" :disabled="validates.verify_image !== false" class="ml-2" @click="view('verify_image')">查看</el-button>
  </el-form-item>
  <View ref="viewRef" @success="viewSuccess" />
</template>

<script setup>
import ImageUpload from '@/components/ImageUpload'
import View from './View'
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  amazon: Boolean,
})
const emit = defineEmits(['update:modelValue'])
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

// 验证密码查看信息
const viewRef = ref()
let validates = reactive({
  email_password: false,
  account_password: false,
  verify_image: false
})

const view = (type) => {
  viewRef?.value.open(type, form.value.shop_id)
}

const viewSuccess = (obj) => {
  for (const key in obj) {
    const value = obj[key]
    validates[key] = value !== false
    if (key === 'verify_image') {
      value && (form.value[key] = value || [])
    } else {
      value && (form.value[key] = value || '')
    }
  }
}

const phone_id = ref()
const reset = () => {
  phone_id.value = form.value.phone_id
  validates = reactive({
    email_password: false,
    account_password: false,
    verify_image: false
  })
}

const clearTimer = () => {
  viewRef?.value.clearTimer()
}

defineExpose({ reset, clearTimer })
</script>